<!--
 * @Author: dongdong.wu
 * @Date: 2021-03-11 10:16:27
 * @Description: 下拉
-->
<template>
  <el-select
    v-bind="$attrs"
    v-on="$listeners"
    :value="value"
    @visible-change="visibleChange"
    @input="update"
    :placeholder="placeholder"
    clearable
  >
    <el-option v-if="paramAll" key :label="`请选择${placeholder}`" value=""/>
    <el-option
      v-for="item in options"
      :key="item[itemKey] || item[valueName]"
      :label="item[labelName]"
      :value="valueType == 'obj' ? item : item[valueName]"
    >
      <slot name="label" :item="item"></slot>
    </el-option>
  </el-select>
</template>

<script>
  export default {
    name: "WeSelect",
    props: {
      value: {
        // 绑定的值
        type: [String, Boolean, Number, Array, Object],
        default: ""
      },
      itemKey: {
        // 默认的唯一标识。防止value出现相同的数据！
        type: String,
        default: ""
      },
      placeholder: String,
      valueName: {
        // 后端返回集合的标识字段
        type: String,
        default: "key"
      },
      labelName: {
        // 后端返回集合的显示的字段
        type: String,
        default: "value"
      },
      valueType: {
        // 后端返回集合的需要返回后端的标识字段
        type: String,
        default: "value"
      },
      options: {
        // select集合
        type: [String, Array],
        default: () => []
      },
      paramAll: {
        // 是否显示全部
        type: Boolean,
        default: false
      }
    },
    methods: {
      update(val) {
        this.$emit("input", val);
      },
      visibleChange(val) {
        // 显示select回调
        if (val) {
          this.$emit("showSelect");
        }
      }
    }
  };
</script>
